<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" th:href="@{/bootstrap.min.css}">
    <script th:src="@{/jquery-3.3.1.slim.min.js}"></script>
    <script th:src="@{/popper.min.js}"></script>
    <script th:src="@{/bootstrap.min.js}"></script>
    <script th:src="@{/vue.js}"></script>
    <script th:src="@{/axios.min.js}"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">后台管理</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" th:href="@{/release-work/admin/work}">发布工作管理 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" th:href="@{/release-work/admin/ucenter}">用户管理</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="false">
                    更多
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">小程序管理</a>
                    <a class="dropdown-item" href="#">L</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item disabled" href="#">待扩展</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">待扩展</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="搜索">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form>
    </div>
</nav>
<div class="container">
    <div class="row">
        <div class="col-3">
            <div class="list-group">
                <div
                        :class="itemActive[0] ? 'list-group-item active' : 'list-group-item'"
                        @click="itemActiveMethod(0)"
                        style="cursor:pointer;">全部用户
                </div>
                <div
                        :class="itemActive[1] ? 'list-group-item active' : 'list-group-item'"
                        @click="itemActiveMethod(1)"
                        style="cursor:pointer;">新注册用户
                </div>
                <div
                        :class="itemActive[2] ? 'list-group-item active' : 'list-group-item'"
                        @click="itemActiveMethod(2)"
                        style="cursor:pointer;">管理员用户
                </div>
            </div>
        </div>
        <div class="col-9">
            <div class="row" v-show="itemActive[1]">
                <div class="col">
                    <label>
                        起始时间：
                        <input v-model="form.begin" type="date">
                    </label>
                </div>
                <div class="col">
                    <label>
                        截至时间：
                        <input v-model="form.end" type="date">
                    </label>
                </div>
                <div class="col">
                    <button class="button" @click="search(1)">检索</button>
                </div>
            </div>
            <table v-if="!itemActive[2]" class="table table-hover">
                <thead>
                <tr>
                    <th scope="col">Id</th>
                    <th scope="col">用户名字</th>
                    <th scope="col">头像</th>
                    <th scope="col">黑名单</th>
                    <th scope="col">平台</th>
                    <th scope="col">注册时间</th>
                    <th scope="col">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item, index) in userList.records">
                    <td>{{(userList.current -1) * 15 + index + 1}}</td>
                    <td>{{item.nickName}}</td>
                    <td>
                        <img :src="item.avatarUrl" class="avatar" alt="头像">
                    </td>
                    <td>
                        <div class="custom-control custom-switch">
                            <input type="checkbox"
                                   class="custom-control-input"
                                   :id="'customSwitch' + index"
                                   :checked="item.isDeleted"
                                   @change="changeStatus(item.id)">
                            <label class="custom-control-label" :for="'customSwitch' + index"></label>
                        </div>
                    </td>
                    <td>
                        <span v-if="item.openId != null">{{item.openId.length < 28 ? '字节' : '微信'}}</span>
                    </td>
                    <td>{{item.gmtCreate}}</td>
                    <td>
                        <button type="button" data-toggle="modal" :data-target="'#t' + index" class="btn btn-link">
                            查看详情
                        </button>
                        <div class="modal fade" :id="'t'+index" tabindex="-1" role="dialog"
                             aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">{{item.nickName}}</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="card">
                                            <div class="card-body">地域：{{item.area}}</div>
                                            <div class="card-body">性别：{{item.gender}}</div>
                                            <div class="card-body">创建时间：{{item.gmtCreate}}</div>
                                            <div class="card-body">手机：{{item.phone}}</div>
                                            <div class="card-body">用户名：{{item.username}}</div>
                                            <div class="card-body">昵称：{{item.nickName}}</div>
                                            <div class="card-body">生日：{{item.birthday}}</div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody>
                <tfoot v-show="userList.total == 0">
                <tr style="text-align: center">
                    <td colspan="7">数据为空</td>
                </tr>
                </tfoot>
            </table>
            <table v-if="itemActive[2]" class="table table-hover">
                <thead>
                <tr>
                    <th>id</th>
                    <th>用户名</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item, index) in userList.records">
                    <td>{{(userList.current -1) * 15 + index + 1}}</td>
                    <td>{{item.username}}</td>
                    <td>{{item.gmtCreate}}</td>
                    <td>
                        <button type="button" data-toggle="modal" :data-target="'#a' + index" class="btn btn-link">
                            查看详情
                        </button>
                        <div class="modal fade" :id="'a'+index" tabindex="-1" role="dialog"
                             aria-labelledby="exampleModalLabel1" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel1">{{item.nickName}}</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="card">
                                            <div class="card-body">创建时间：{{item.gmtCreate}}</div>
                                            <div class="card-body">用户名：{{item.username}}</div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
            <nav aria-label="Page navigation example">
                <ul class="pagination">
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                            <span class="sr-only">Previous</span>
                        </a>
                    </li>
                    <li
                            v-for="index in userList.pages"
                            :class="index == userList.current ? 'page-item active' : 'page-item'">
                        <a class="page-link" href="javascript:void(0)" @click="getUserList(index)">
                            {{index}}
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                            <span class="sr-only">Next</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: ".container",
        data() {
            return {
                itemActive: [true, false, false],
                // baseUrl: 'https://localhost:10000',
                baseUrl: "https://we9.91gongju.cn:10000",
                userList: {pages: 1, total: 0},
                form: {begin: "2020-08-01T08:38:54.211Z", end: "2020-09-01T08:38:54.211Z"},
            }
        },
        methods: {
            itemActiveMethod(index) {
                let result = [false, false, false];
                for (let i = 0; i < this.itemActive.length; i++) {
                    if (i === index) {
                        result[i] = true;
                    }
                }
                switch (index) {
                    case 0:
                        this.userList = {pages: 1, total: 0};
                        this.getUserList(1);
                        break;
                    case 1:
                        this.userList = {pages: 1, total: 0};
                        break;
                    case 2:
                        this.userList = {pages: 1, total: 0};
                        this.getAdminUserList(1);
                        break;
                }
                this.itemActive = result;
            },
            getUserList(current) {
                axios.get(`${this.baseUrl}/user/getUserList/${current}`).then(response => {
                    this.userList = response.data.dataMap.data;
                });
            },
            changeStatus(id) {
                axios.delete(`${this.baseUrl}/user/user/${id}`);
            },
            search(current) {
                if (current < this.userList.pages) {
                    axios.post(`${this.baseUrl}/user/getUserList/date/${current}`, this.form).then(response => {
                        this.userList = response.data.dataMap.data
                    })
                } else {
                    axios.post(`${this.baseUrl}/user/getUserList/date/${current}`, this.form).then(response => {
                        this.userList = response.data.dataMap.data
                    })
                }
            },
            getAdminUserList(current) {
                if (current < this.userList.pages) {
                    axios.get(`${this.baseUrl}/admin/user-list/${current + 1}`).then(response => {
                        this.userList = response.data.dataMap.data;
                    });
                } else {
                    axios.get(`${this.baseUrl}/admin/user-list/${1}`).then(response => {
                        this.userList = response.data.dataMap.data;
                    });
                }
            },
            openAdminDetails(item) {
                console.log(item);
            },
            openDetails(item) {

                console.log(item);
            },
        },
        created() {
            this.getUserList(1);
        }
    })
</script>
</body>
<style>
    .avatar {
        width: 50px;
        height: 50px;
    }
</style>
</html>
